{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    {{ this_user }}.username - 小柿子😀
{% endblock %}
{% block extra_head %}
    <link rel="stylesheet" href="{% static 'auser/css/homepage.css' %}">
{% endblock %}
<br>
{% block navbar %}
    <br>
    <div class="jumbotron">
        <div class="user-info">
            <div class="user-portrait">
                <a href="javascript:void(0)">
                    <!-- this_user.avatar 就是上传路径 -->
                    <img src="/media/{{ this_user.avatar }}" class="h-avatar" alt="##">
                </a>
            </div>
            <div class="user-info-text">
                <div class="user-name">
                    <span class="u-name">
                        <h2>{{ this_user.username }}</h2>
                        {% if this_user.role and this_user == user %}
                            <span class="admin-name">(管理员)</span>
                        {% endif %}
                    </span>
                </div>
                <div class="user-brief">
                    <span class="u-brief">
                        <span style="color: #0e566c">about: </span>{{ this_user.about_me }}
                    </span>
                </div>
            </div>
        </div>
        <div id="user-action">
            <div id="user-action-amend">
                <a href="{% url 'auser:user_info_amend' pk=user.id %}" class="btn btn-primary" role="button">
                    修改资料
                </a>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div id="homepage-tab">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#have-commented" aria-controls="home" role="tab"
                                                      data-toggle="tab">我的影评</a>
            </li>
            <li role="presentation"><a href="#my-reviews" aria-controls="profile" role="tab"
                                       data-toggle="tab">我的图解集</a>
            </li>
            <li role="presentation"><a href="#have-liked" aria-controls="messages" role="tab"
                                       data-toggle="tab">我的赞同</a></li>
            <li role="presentation"><a href="#have-started" aria-controls="settings" role="tab"
                                       data-toggle="tab">我的图稀罕</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="have-commented">
                {% include 'auser/_commented.html' with this_user=this_user %}</div>
            <div role="tabpanel" class="tab-pane " id="my-reviews">
                {% include 'auser/_my_reviews.html' with this_user=this_user %}
            </div>
            <div role="tabpanel" class="tab-pane" id="have-liked">
                {% include 'auser/_have_liked.html' with this_user=this_user %}
            </div>
            <div role="tabpanel" class="tab-pane" id="have-started">sf</div>
        </div>
    </div>
{% endblock %}